<template>
  <div class="flow-menu" ref="tool">
    <el-collapse class="flow-menu-content"
      v-model="defaultExpandedNames">
      <el-collapse-item v-for="menu in menuList"
        :key="menu.id" :name="menu.name">
        <template #title>
          <span
            class="flow-menu-content_title">{{ menu.name }}</span>
        </template>
        <div class="dragArea">
          <div v-for="subMenu in menu.children"
            :draggable="data_etl.status===0?true:false"
            @dragstart="dragNodeStart($event, subMenu)"
            class="flow-menu-node" :key="subMenu.id"
            :type="subMenu.type">
            <div class="flow-menu-node_icon"><i
                class="iconfont" :class="subMenu.icon"></i>
            </div>
            <div class="flow-menu-node_name">
              {{ subMenu.typeName }}</div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import { computed, defineComponent, onMounted, ref } from "vue";
import { useEtlStore } from "../../../../store/flowEtl";
import { etl_libs } from "../../../../utils/constant";

export default defineComponent({
  name: "flow-panel-libs",
  emits: ["dragNodeStart"],
  setup(props, ctx) {
    const defaultExpandedNames = ["数据集", "列编辑", "数据编辑", "数据集组合"];
    const etlStore = useEtlStore();
    const data_etl = computed(() => etlStore.data_etl);
    const menuList = ref([]);
    const dragNodeStart = (ele, item) => {
      ctx.emit("dragNodeStart", item);
    };
    onMounted(()=>{
      menuList.value = etl_libs
    })
    return {
      menuList,
      data_etl,
      dragNodeStart,
      defaultExpandedNames,
    };
  },
});
</script>
<style lang="less" scoped>
.flow-menu {
  width: 240px;
  background-color: #191c21;
  user-select: none;
  overflow: auto;
  min-width: 240px;
}

.flow-menu-content {
  .flow-menu-content_title {
    padding-left: 12px;
  }

  .dragArea {
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, 1fr));
    width: 100%;

    .flow-menu-node {
      cursor: pointer;
      margin: 8px auto;
      grid-column: span 1 / span 1;

      .flow-menu-node_icon {
        width: 40px;
        height: 40px;
        text-align: center;
        margin: 0 auto;
        border: 2px solid #087eea54;
        border-radius: 8px;

        & > i {
          font-size: 20px;
          color: #2196f3;
          line-height: 36px;
        }

        &:last-child {
          margin-right: auto;
        }
      }

      .flow-menu-node_name {
        color: #ccc;
        margin-top: 6px;
        font-size: 12px;
        text-align: center;
      }
    }
  }
}
</style>